<template>
    <view class="page-creation-detail">
        <view class="article">
            <view class="title flex-block">
                <u-image width="48rpx" height="48rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>
                <text class="ml-2">昵称</text>
            </view>
            <view class="content">
                <!-- <rich-text :node="info.content"></rich-text> -->
                 {{ info.content }}
            </view>
            <view class="time">
                    2025-12-12 地点
            </view>
        </view>
        <view class="comment">
            <view class="total font-bold">评论 {{ info.commentsSum || 0 }}</view>
            <view class="fly-card">
                <view class="item" v-for="(item,index) in commentList" :key="index">
                    <view class="thumb">
                        <u-image width="48rpx" height="48rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>
                    </view>
                    <view class="content">
                        <view class="title">{{ item.createBy }}</view>
                        <view class="desc" @click="sendComment(item)">{{ item.content }}</view>
                        <view class="date">1天前 广州</view>
                    </view>
                </view>
                <!-- <view class="item">
                    <view class="thumb">
                        <u-image width="48rpx" height="48rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>
                    </view>
                    <view class="content">
                        <view class="title">姓名</view>
                        <view class="desc">评论的内容</view>
                        <view class="date">1天前 广州</view>
                    </view>
                </view> -->
            </view>
        </view>
        <view class="fly-bottom-bar">
            <view class="content">
                <view class="function">
                    <view class="input" @click="sendComment()">写点什么...</view>
                    <view class="btns">
                        <view class="btn-item" @click="handleLike"><u-image :src="info.yesNoLikes ? proxy.$icon.likePre : proxy.$icon.likeDef" width="42rpx" height="42rpx"></u-image><text class="ml-1">{{info.likesSum || 0}}</text></view>
                        <view class="btn-item" @click="handleFavorite"><u-image :src="info.yesNoFavorites ? proxy.$icon.collectPre : proxy.$icon.collectDef" width="42rpx" height="42rpx"></u-image><text class="ml-1">{{ info.favoritesSum || 0}}</text></view>
                        <view class="btn-item"><u-image :src="proxy.$icon.talk" width="42rpx" height="42rpx"></u-image><text class="ml-1">{{ info.commentsSum || 0 }}</text></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
let appStore = useAppStore();
import { useArticleStore } from '@/stores/article';
import { reactive } from 'vue';
let articleStore = useArticleStore();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let pageParams = reactive({});
let info = ref();
let commentList = ref([])
const getDetail = () => {
    proxy.$http('get', '/admin/articles/'+pageParams.id, {}, (data,msg) => {
        info.value = data;
        console.log(info.value.content);
    })
};
const getCommentList = () => {
    proxy.$http('get', '/admin/comments/articles/'+ pageParams.id +'/comments', {articleId: pageParams.id}, (data,msg) => {
        commentList.value = data;
    },msg => {

    }, {}, 'all')
}
const sendComment = (obj) => {
    let params = {
        articleId: pageParams.id,
        userId: appStore.userInfo.userId,
        content: '',
    };
    let placeholderText = '请输入'
    if(obj){
        params.parentCommentId = obj.id;
        placeholderText = '对' + obj.createBy + '说'
    };
    uni.showModal({
        title: '写下评论',
        content: '',
        placeholderText: placeholderText,
        editable: true,
        success: res => {
            if(res.confirm){
                params.content = res.content;
                articleStore.sendComment(params).then(res => {
                    getDetail();
                    getCommentList();
                })
            }
        }
    })
};
const handleLike = () => {
    let params = {
        articleId: pageParams.id,
        userId: appStore.userInfo.userId,
    }
    articleStore.handleLike(params);
};
const deleteLike = (id) => {
    articleStore.deleteLike(id);
}
const handleFavorite = () => {
    let params = {
        articleId: pageParams.id,
        userId: appStore.userInfo.userId,
    }
    articleStore.handleFavorite(params);
};
const deleteFavorite = (id) => {
    articleStore.deleteFavorite(id);
};
onLoad(e => {
    pageParams = e;
});
onShow(() => {
    getDetail();
    getCommentList();
})


</script>
<style>
page{
    height:100%;background:#fff;
}
</style>